<template>
  <div>
    <div ref="myChart" id="qqq"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
export default {
  name: "QiwenView",
  data()
  {
    return {
      place: "德阳",
      shujuArray:[],
      hightemArray:[],
      lowtemArray:[],
    }
  },
methods:{
    huoqu()
    {
      console.log(this.place);
      axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.place).then((response)=>{
console.log(response)
            for(var i=0;i<5;i++)
            {
              this.shujuArray[i] = response.data.data.forecast[i].date
              this.hightemArray[i]=response.data.data.forecast[i].high.split(" ")
              this.lowtemArray[i]=response.data.data.forecast[i].low.split(" ")
            }
            console.log("------------------------------")
            this.show()
          }).catch(err=>{
            console.log(err+"出错了。。。。。。。。。。。。。。。。")
          })
    },
    show()
    {
      console.log(this.shujuArray)
      console.log(this.hightemArray)
      for(var i=0;i<5;i++)
      {
        console.log(this.hightemArray[i][1].split("℃")[0])
        this.hightemArray[i]=parseInt(this.hightemArray[i][1].split("℃")[0])
        this.lowtemArray[i]=parseInt(this.lowtemArray[i][1].split("℃")[0])
      }
      let myEchatrs=echarts.init(this.$refs.myChart)
      //设置数据
      // let option =
      //设置配置项 就是将数据装入其中。
      myEchatrs.setOption({
        title: {
          text: '近五天温度 ',
          textStyle:{
            color:"black"
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.shujuArray
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        series: [
          {
            name: 'Highest',
            type: 'line',
            // data: [10, 11, 13, 11, 12, 12, 9],
            data:this.hightemArray,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: 'Lowest',
            type: 'line',
            // data: [1, -2, 2, 5, 3, 2, 0],
            data:this.lowtemArray,
            markPoint: {
              data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
            },
            markLine: {
              data: [
                { type: 'average', name: 'Avg' },
                [
                  {
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  },
                  {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: 'Max'
                    },
                    type: 'max',
                    name: '最高点'
                  }
                ]
              ]
            }
          }
        ]
      })
    },

},
  mounted() {
    this.huoqu();
  },
}
</script>

<style scoped>
#qqq{
  width: auto;
  height: 400px;
  color: white;
}
</style>